<!DOCTYPE html>
<html lang="zh-CN">
{% include head.html %}

<body class="home blog">
  {% include nav.html %}
  <main class="flex-grow">
    <div class="vp-article vp-container vp-container--with-content-padding article full vp-article--wide">
      <div class="flex">
        <div id="vp-js-desktop__navigation" class="vp-article__aside-left flex-none w-1/6 article__navigation hidden lg:block no-print">
        </div>
        <div id="article-content" class="vp-article__content-panel flex-auto mx-auto px-0 lg:mb-20 max-w-full">
          <article role="article">
            <header>
              <i18n-message i18nkey="breadcrumb.label" attribute="aria-label">
                <nav aria-label="Breadcrumb" role="navigation">
                  <div class="breadcrumbs-wrapper">
                    <ol class="breadcrumbs breadcrumbs--fit-content">
                      <li class=""><a href="/{{ page.categories[0] }}" rel="prev" target="_self">
                      {% for navItem in site.nav %}
                        {% if navItem.id == page.categories[0] %}
                          {{ navItem.title }}
                          {% break %}
                        {% endif %}
                      {% endfor %}
                      </a></li>
                      {% if page.name != "index.md" %}
                      <li class="breadcrumbs--active">
                        <a href="#" target="_self" aria-current="page">{{ page.title }}</a>
                      </li>
                      {% endif %}
                    </ol>
                    <div class="breadcrumbs-wrapper__scroll-mask"></div>
                  </div>
                </nav>
              </i18n-message>
              <div style="margin: 0px 0 16px; width: 100%; display: inline-flex;">
                 <a href="/author/{{ page.author | downcase }}" style="padding-right: 5px;">
                   <img alt="" src="{{ site.path.img }}/author/{{ page.author | downcase }}.svg" target="_blank" srcset="{{ site.path.img }}/author/{{ page.author | downcase }}.svg 2x" height="40" width="40">
                 </a>
                 <a class="font-bold mb-4" href="/author/{{ page.author | downcase }}" target="_blank" style="color: #242526; padding: 5px; text-decoration: none;">{{ page.author }}</a>
                 <p style="color: var(--vp-footer-text-color) !important; padding: 5px;">{{ page.date | date: '%Y-%m-%d' }}</p>
                 <div style="display: inline-block; margin: 0 15px 5px; padding: 5px;">
                   <em style="color: var(--vp-footer-text-color) !important; padding: 5px; filter: grayscale(1);">🏷️</em>
                   {% for tag in page.tags %}
                   <a class="font-bold mb-4" href="/search.html?q={{ tag }}" rel="tag" style="color: #242526; padding: 5px 0px 5px 5px; text-decoration: none;">{{ tag }}</a>&nbsp;
                   {% endfor %}
                 </div>
              </div>
              <h1 class="vp-article__heading article__heading" role="heading"><span class="">{{ page.title }}</span></h1>
            </header>
            <section class="page" id="content" role="main">
              <div id="main-content" class="wiki-content article__content js-tocBot-content">
                {{ content }}
              </div>
            </section>
          </article>
        </div>
        <div class="vp-article__aside-right flex-none w-1/6 article__toc hidden xl:block no-print">
          <div class="vp-scrollable-container vp-scrollable-container--hidden-scrollbars">
            <div class="js-tocBot">
              <ol class="toc-list"></ol>
            </div>
            {% include extinfo.html %}
          </div>
        </div>
      </div>
    </div>
  </main>
  {% include footer.html %}
  {% include mobile.html %}
  <script src="{{site.path.js}}/viewport.js"></script>
  <script type="text/javascript">
    window.onload = function () {
      var ptreeList = document.getElementById("vp-js-desktop__navigation").getElementsByTagName("li")
      for ( var i=0;i<ptreeList.length;i++ ) {
        if ( ptreeList[i].getAttribute("data-id") == "{{ page.url }}" ) {
          ptreeList[i].classList.add("vp-tree-item--active");
        }
      }
    }
  </script>
</body>

</html>
